<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.video-data {
			    position: relative;
			    display: block;
			    width: 50%;
			    min-height: 60px;
			    margin-bottom: 12px;
			    margin-left: 12px;
			    border-radius: 4px;
			    transition: all .3s;
			}
			 .video-data .video-button:after {
				content: "";
				position: absolute;
				top: calc(50% - 20px);
				left: calc(50% - 20px);
				height: 40px;
				width: 40px;
				border-radius: 50%;
				background: #42b983;
				-webkit-animation: wave 1.6s infinite;
				animation: wave 1.6s infinite;
				-webkit-animation-duration: 2s;
				animation-duration: 2s;
				transform-origin: center center;
				z-index: 0
			}
			 .video-data .video-button {
				position: absolute;
				top: 58%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 54px;
				width: 54px;
				background: #42b983;
				border-radius: 50%;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 2;
				cursor: pointer
			}
			 .video-data .video-button img {
			    position: relative;
			    display: block;
			    width: 25px;
			    height: 25px;
			    left: 2px;
			    z-index: 3;
			}
			
			@-webkit-keyframes wave {
				0% {
					transform: scale(1);
					opacity: 1
				}
			
				25% {
					transform: scale(1);
					opacity: 1
				}
			
				to {
					transform: scale(4.5);
					opacity: 0
				}
			}
			
			@keyframes wave {
				0% {
					transform: scale(1);
					opacity: 1
				}
			
				25% {
					transform: scale(1);
					opacity: 1
				}
			
				to {
					transform: scale(4.5);
					opacity: 0
				}
			}
			
		</style>
	</head>
	<body>
		<div class="video-data ">
			<a href="/video/84jGza57" class="video-button">
				<img src="play.svg">
			</a>
		</div>
	</body>
</html>
